extends /default.pug

block scripts
  if !starter
    // Plugins and scripts required by this view
    script(src='node_modules/chart.js/dist/Chart.min.js')
    script(src='node_modules/@coreui/coreui-plugin-chartjs-custom-tooltips/dist/js/custom-tooltips.min.js')
    script(src='js/main.js')

block view
  .animated.fadeIn
    .row
      .col-sm-6.col-lg-3
        .card.text-white.bg-primary
          .card-body.pb-0
            .btn-group.float-right
              button.btn.btn-transparent.dropdown-toggle.p-0(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.icon-settings
              .dropdown-menu.dropdown-menu-right
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3.mx-3(style='height:70px;')
            canvas#card-chart1.chart(height='70')
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-info
          .card-body.pb-0
            button.btn.btn-transparent.p-0.float-right(type='button')
              i.icon-location-pin
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3.mx-3(style='height:70px;')
            canvas#card-chart2.chart(height='70')
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-warning
          .card-body.pb-0
            .btn-group.float-right
              button.btn.btn-transparent.dropdown-toggle.p-0(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.icon-settings
              .dropdown-menu.dropdown-menu-right
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3(style='height:70px;')
            canvas#card-chart3.chart(height='70')
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-danger
          .card-body.pb-0
            .btn-group.float-right
              button.btn.btn-transparent.dropdown-toggle.p-0(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.icon-settings
              .dropdown-menu.dropdown-menu-right
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3.mx-3(style='height:70px;')
            canvas#card-chart4.chart(height='70')
      // /.col
    // /.row
    .card
      .card-body
        .row
          .col-sm-5
            h4.card-title.mb-0 Traffic
            .small.text-muted November 2017
          // /.col
          .col-sm-7.d-none.d-md-block
            button.btn.btn-primary.float-right(type='button')
              i.icon-cloud-download
            .btn-group.btn-group-toggle.float-right.mr-3(data-toggle='buttons')
              label.btn.btn-outline-secondary
                input#option1(type='radio', name='options', autocomplete='off')
                |  Day
              label.btn.btn-outline-secondary.active
                input#option2(type='radio', name='options', autocomplete='off', checked='')
                |  Month
              label.btn.btn-outline-secondary
                input#option3(type='radio', name='options', autocomplete='off')
                |  Year
          // /.col
        // /.row
        .chart-wrapper(style='height:300px;margin-top:40px;')
          canvas#main-chart.chart(height='300')
      .card-footer
        .row.text-center
          .col-sm-12.col-md.mb-sm-2.mb-0
            .text-muted Visits
            strong 29.703 Users (40%)
            .progress.progress-xs.mt-2
              .progress-bar.bg-success(role='progressbar', style='width: 40%', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100')
          .col-sm-12.col-md.mb-sm-2.mb-0
            .text-muted Unique
            strong 24.093 Users (20%)
            .progress.progress-xs.mt-2
              .progress-bar.bg-info(role='progressbar', style='width: 20%', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100')
          .col-sm-12.col-md.mb-sm-2.mb-0
            .text-muted Pageviews
            strong 78.706 Views (60%)
            .progress.progress-xs.mt-2
              .progress-bar.bg-warning(role='progressbar', style='width: 60%', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100')
          .col-sm-12.col-md.mb-sm-2.mb-0
            .text-muted New Users
            strong 22.123 Users (80%)
            .progress.progress-xs.mt-2
              .progress-bar.bg-danger(role='progressbar', style='width: 80%', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')
          .col-sm-12.col-md.mb-sm-2.mb-0
            .text-muted Bounce Rate
            strong 40.15%
            .progress.progress-xs.mt-2
              .progress-bar(role='progressbar', style='width: 40%', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100')
    // /.card
    .row
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-facebook
            i.fa.fa-facebook
            .chart-wrapper
              canvas#social-box-chart-1(height='90')
          .brand-card-body
            div
              .text-value 89k
              .text-uppercase.text-muted.small friends
            div
              .text-value 459
              .text-uppercase.text-muted.small feeds
      // /.col
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-twitter
            i.fa.fa-twitter
            .chart-wrapper
              canvas#social-box-chart-2(height='90')
          .brand-card-body
            div
              .text-value 973k
              .text-uppercase.text-muted.small followers
            div
              .text-value 1.792
              .text-uppercase.text-muted.small tweets
      // /.col
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-linkedin
            i.fa.fa-linkedin
            .chart-wrapper
              canvas#social-box-chart-3(height='90')
          .brand-card-body
            div
              .text-value 500+
              .text-uppercase.text-muted.small contacts
            div
              .text-value 292
              .text-uppercase.text-muted.small feeds
      // /.col
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-google-plus
            i.fa.fa-google-plus
            .chart-wrapper
              canvas#social-box-chart-4(height='90')
          .brand-card-body
            div
              .text-value 894
              .text-uppercase.text-muted.small followers
            div
              .text-value 92
              .text-uppercase.text-muted.small circles
      // /.col
    // /.row
    .row
      .col-md-12
        .card
          .card-header
            | Traffic & Sales
          .card-body
            .row
              .col-sm-6
                .row
                  .col-sm-6
                    .callout.callout-info
                      small.text-muted New Clients
                      br
                      strong.h4 9,123
                      .chart-wrapper
                        canvas#sparkline-chart-1(width='100', height='30')
                  // /.col
                  .col-sm-6
                    .callout.callout-danger
                      small.text-muted Recuring Clients
                      br
                      strong.h4 22,643
                      .chart-wrapper
                        canvas#sparkline-chart-2(width='100', height='30')
                  // /.col
                // /.row
                hr.mt-0
                .progress-group.mb-4
                  .progress-group-prepend
                    span.progress-group-text
                      | Monday
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 34%', aria-valuenow='34', aria-valuemin='0', aria-valuemax='100')
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 78%', aria-valuenow='78', aria-valuemin='0', aria-valuemax='100')
                .progress-group.mb-4
                  .progress-group-prepend
                    span.progress-group-text
                      | Tuesday
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 56%', aria-valuenow='56', aria-valuemin='0', aria-valuemax='100')
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 94%', aria-valuenow='94', aria-valuemin='0', aria-valuemax='100')
                .progress-group.mb-4
                  .progress-group-prepend
                    span.progress-group-text
                      | Wednesday
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 12%', aria-valuenow='12', aria-valuemin='0', aria-valuemax='100')
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 67%', aria-valuenow='67', aria-valuemin='0', aria-valuemax='100')
                .progress-group.mb-4
                  .progress-group-prepend
                    span.progress-group-text
                      | Thursday
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 43%', aria-valuenow='43', aria-valuemin='0', aria-valuemax='100')
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 91%', aria-valuenow='91', aria-valuemin='0', aria-valuemax='100')
                .progress-group.mb-4
                  .progress-group-prepend
                    span.progress-group-text
                      | Friday
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 22%', aria-valuenow='22', aria-valuemin='0', aria-valuemax='100')
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 73%', aria-valuenow='73', aria-valuemin='0', aria-valuemax='100')
                .progress-group.mb-4
                  .progress-group-prepend
                    span.progress-group-text
                      | Saturday
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 53%', aria-valuenow='53', aria-valuemin='0', aria-valuemax='100')
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 82%', aria-valuenow='82', aria-valuemin='0', aria-valuemax='100')
                .progress-group.mb-4
                  .progress-group-prepend
                    span.progress-group-text
                      | Sunday
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 9%', aria-valuenow='9', aria-valuemin='0', aria-valuemax='100')
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 69%', aria-valuenow='69', aria-valuemin='0', aria-valuemax='100')
              // /.col
              .col-sm-6
                .row
                  .col-sm-6
                    .callout.callout-warning
                      small.text-muted Pageviews
                      br
                      strong.h4 78,623
                      .chart-wrapper
                        canvas#sparkline-chart-3(width='100', height='30')
                  // /.col
                  .col-sm-6
                    .callout.callout-success
                      small.text-muted Organic
                      br
                      strong.h4 49,123
                      .chart-wrapper
                        canvas#sparkline-chart-4(width='100', height='30')
                  // /.col
                // /.row
                hr.mt-0
                .progress-group
                  .progress-group-header
                    i.icon-user.progress-group-icon
                    div Male
                    .ml-auto.font-weight-bold 43%
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-warning(role='progressbar', style='width: 43%', aria-valuenow='43', aria-valuemin='0', aria-valuemax='100')
                .progress-group.mb-5
                  .progress-group-header
                    i.icon-user-female.progress-group-icon
                    div Female
                    .ml-auto.font-weight-bold 37%
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-warning(role='progressbar', style='width: 43%', aria-valuenow='43', aria-valuemin='0', aria-valuemax='100')
                .progress-group
                  .progress-group-header.align-items-end
                    i.icon-globe.progress-group-icon
                    div Organic Search
                    .ml-auto.font-weight-bold.mr-2 191.235
                    .text-muted.small (56%)
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-success(role='progressbar', style='width: 56%', aria-valuenow='56', aria-valuemin='0', aria-valuemax='100')
                .progress-group
                  .progress-group-header.align-items-end
                    i.icon-social-facebook.progress-group-icon
                    div Facebook
                    .ml-auto.font-weight-bold.mr-2 51.223
                    .text-muted.small (15%)
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-success(role='progressbar', style='width: 15%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100')
                .progress-group
                  .progress-group-header.align-items-end
                    i.icon-social-twitter.progress-group-icon
                    div Twitter
                    .ml-auto.font-weight-bold.mr-2 37.564
                    .text-muted.small (11%)
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-success(role='progressbar', style='width: 11%', aria-valuenow='11', aria-valuemin='0', aria-valuemax='100')
                .progress-group
                  .progress-group-header.align-items-end
                    i.icon-social-linkedin.progress-group-icon
                    div LinkedIn
                    .ml-auto.font-weight-bold.mr-2 27.319
                    .text-muted.small (8%)
                  .progress-group-bars
                    .progress.progress-xs
                      .progress-bar.bg-success(role='progressbar', style='width: 8%', aria-valuenow='8', aria-valuemin='0', aria-valuemax='100')
              // /.col
            // /.row
            br
            table.table.table-responsive-sm.table-hover.table-outline.mb-0
              thead.thead-light
                tr
                  th.text-center
                    i.icon-people
                  th User
                  th.text-center Country
                  th Usage
                  th.text-center Payment Method
                  th Activity
              tbody
                tr
                  td.text-center
                    .avatar
                      img.img-avatar(src='img/avatars/1.jpg', alt='admin@bootstrapmaster.com')
                      span.avatar-status.badge-success
                  td
                    div Yiorgos Avraamu
                    .small.text-muted
                      span New
                      |  | Registered: Jan 1, 2015
                  td.text-center
                    i#us.flag-icon.flag-icon-us.h4.mb-0(title='us')
                  td
                    .clearfix
                      .float-left
                        strong 50%
                      .float-right
                        small.text-muted Jun 11, 2015 - Jul 10, 2015
                    .progress.progress-xs
                      .progress-bar.bg-success(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                  td.text-center
                    i.fa.fa-cc-mastercard(style='font-size:24px')
                  td
                    .small.text-muted Last login
                    strong 10 sec ago
                tr
                  td.text-center
                    .avatar
                      img.img-avatar(src='img/avatars/2.jpg', alt='admin@bootstrapmaster.com')
                      span.avatar-status.badge-danger
                  td
                    div Avram Tarasios
                    .small.text-muted
                      span Recurring
                      |  | Registered: Jan 1, 2015
                  td.text-center
                    i#br.flag-icon.flag-icon-br.h4.mb-0(title='br')
                  td
                    .clearfix
                      .float-left
                        strong 10%
                      .float-right
                        small.text-muted Jun 11, 2015 - Jul 10, 2015
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 10%', aria-valuenow='10', aria-valuemin='0', aria-valuemax='100')
                  td.text-center
                    i.fa.fa-cc-visa(style='font-size:24px')
                  td
                    .small.text-muted Last login
                    strong 5 minutes ago
                tr
                  td.text-center
                    .avatar
                      img.img-avatar(src='img/avatars/3.jpg', alt='admin@bootstrapmaster.com')
                      span.avatar-status.badge-warning
                  td
                    div Quintin Ed
                    .small.text-muted
                      span New
                      |  | Registered: Jan 1, 2015
                  td.text-center
                    i#in.flag-icon.flag-icon-in.h4.mb-0(title='in')
                  td
                    .clearfix
                      .float-left
                        strong 74%
                      .float-right
                        small.text-muted Jun 11, 2015 - Jul 10, 2015
                    .progress.progress-xs
                      .progress-bar.bg-warning(role='progressbar', style='width: 74%', aria-valuenow='74', aria-valuemin='0', aria-valuemax='100')
                  td.text-center
                    i.fa.fa-cc-stripe(style='font-size:24px')
                  td
                    .small.text-muted Last login
                    strong 1 hour ago
                tr
                  td.text-center
                    .avatar
                      img.img-avatar(src='img/avatars/4.jpg', alt='admin@bootstrapmaster.com')
                      span.avatar-status.badge-secondary
                  td
                    div Enéas Kwadwo
                    .small.text-muted
                      span New
                      |  | Registered: Jan 1, 2015
                  td.text-center
                    i#fr.flag-icon.flag-icon-fr.h4.mb-0(title='fr')
                  td
                    .clearfix
                      .float-left
                        strong 98%
                      .float-right
                        small.text-muted Jun 11, 2015 - Jul 10, 2015
                    .progress.progress-xs
                      .progress-bar.bg-danger(role='progressbar', style='width: 98%', aria-valuenow='98', aria-valuemin='0', aria-valuemax='100')
                  td.text-center
                    i.fa.fa-paypal(style='font-size:24px')
                  td
                    .small.text-muted Last login
                    strong Last month
                tr
                  td.text-center
                    .avatar
                      img.img-avatar(src='img/avatars/5.jpg', alt='admin@bootstrapmaster.com')
                      span.avatar-status.badge-success
                  td
                    div Agapetus Tadeáš
                    .small.text-muted
                      span New
                      |  | Registered: Jan 1, 2015
                  td.text-center
                    i#es.flag-icon.flag-icon-es.h4.mb-0(title='es')
                  td
                    .clearfix
                      .float-left
                        strong 22%
                      .float-right
                        small.text-muted Jun 11, 2015 - Jul 10, 2015
                    .progress.progress-xs
                      .progress-bar.bg-info(role='progressbar', style='width: 22%', aria-valuenow='22', aria-valuemin='0', aria-valuemax='100')
                  td.text-center
                    i.fa.fa-google-wallet(style='font-size:24px')
                  td
                    .small.text-muted Last login
                    strong Last week
                tr
                  td.text-center
                    .avatar
                      img.img-avatar(src='img/avatars/6.jpg', alt='admin@bootstrapmaster.com')
                      span.avatar-status.badge-danger
                  td
                    div Friderik Dávid
                    .small.text-muted
                      span New
                      |  | Registered: Jan 1, 2015
                  td.text-center
                    i#pl.flag-icon.flag-icon-pl.h4.mb-0(title='pl')
                  td
                    .clearfix
                      .float-left
                        strong 43%
                      .float-right
                        small.text-muted Jun 11, 2015 - Jul 10, 2015
                    .progress.progress-xs
                      .progress-bar.bg-success(role='progressbar', style='width: 43%', aria-valuenow='43', aria-valuemin='0', aria-valuemax='100')
                  td.text-center
                    i.fa.fa-cc-amex(style='font-size:24px')
                  td
                    .small.text-muted Last login
                    strong Yesterday
      // /.col
    // /.row
